import React, { Suspense } from "react";
import { RoutePath } from "./routePath";
// import { Loading } from '@/components/ui';

const Index = React.lazy(() => import("../../pages/Index/index"));
const Steps = React.lazy(() => import("../../pages/Steps/index"));
const Icon = React.lazy(() => import("../../pages/Icon/index"));
const Button = React.lazy(() => import("../../pages/Button/index"));
const NavBar = React.lazy(() => import("../../pages/NavBar/index"));
const Demo = React.lazy(() => import("../../pages/Demo/index"));
const Switch = React.lazy(() => import("../../pages/Switch/index"));
const TabBar = React.lazy(() => import("../../pages/TabBar/index"));
const Badge=React.lazy(() => import("../../pages/Badge/index"));
const Modal = React.lazy(() => import("../../pages/Modal/index"));
const Toast = React.lazy(() => import("../../pages/Toast/index"));
const Tag = React.lazy(() => import("../../pages/Tag/index"));
const CopyBtn = React.lazy(() => import("../../pages/CopyBtn/index"));
const Popup = React.lazy(() => import("../../pages/Popup/index"));



const PageWrapper = (Component: any, props: any) => {
  return (
    <Suspense
      fallback={
        <div style={{ color: "#1890ff", width: "100%", textAlign: "center" }}>
          {/* <Loading /> */}
        </div>
      }
    >
      <Component {...props} />
    </Suspense>
  );
};
export const routeArray = [
  {
    path: RoutePath.index,
    id: new Date().getTime(),
    component: (props: any) => PageWrapper(Index, props),
  },
  {
    path: RoutePath.demo.index,
    title: "Demo",
    id: new Date().getTime(),
    component: (props: any) => PageWrapper(Demo, props),
  },
  {
    path: RoutePath.steps.index,
    title: "Steps",
    id: Math.random(),
    component: (props: any) => PageWrapper(Steps, props),
  },
  {
    path: RoutePath.icon.index,
    title: "Icon",
    id: Math.random(),
    component: (props: any) => PageWrapper(Icon, props),
  },
  {
    path: RoutePath.button.index,
    title: "Button",
    id: Math.random(),
    component: (props: any) => PageWrapper(Button, props),
  },
  {
    path: RoutePath.navbar.index,
    title: "NavBar",
    id: Math.random(),
    component: (props: any) => PageWrapper(NavBar, props),
  },
  {
    path: RoutePath.switch.index,
    title: "Switch",
    id: Math.random(),
    component: (props: any) => PageWrapper(Switch, props),
  },
  {
    path: RoutePath.tabbar.index,
    title: "TabBar",
    id: Math.random(),
    component: (props: any) => PageWrapper(TabBar, props),
  },
  {
    path: RoutePath.modal.index,
    title: "Modal",
    id: Math.random(),
    component: (props: any) => PageWrapper(Modal, props),
  },
  {
    path: RoutePath.toast.index,
    title: "Toast",
    id: Math.random(),
    component: (props: any) => PageWrapper(Toast, props),
  },
  {
    path: RoutePath.tag.index,
    title: "Tag",
    id: Math.random(),
    component: (props: any) => PageWrapper(Tag, props),
  },
  {
    path: RoutePath.toast.index,
    title: "Toast",
    id: Math.random(),
    component: (props: any) => PageWrapper(Toast, props),
  },
  {
    path: RoutePath.badge.index,
    title: "Badge",
    id: Math.random(),
    component: (props: any) => PageWrapper(Badge, props),
  },
  {
    path: RoutePath.copybtn.index,
    title: "CopyBtn",
    id: Math.random(),
    component: (props: any) => PageWrapper(CopyBtn, props),
  },
  {
    path: RoutePath.popup.index,
    title: "Popup",
    id: Math.random(),
    component: (props: any) => PageWrapper(Popup, props),
  },
];
